<template>
	<view class="invite">
		<view :class="device=='ios'?'ios_pageTitle':'and_pageTitle'">
			<view class="statusBar"></view>
			<view :class="['pageTitle','dFlex','jBetween_aCenter']">
				<view class="backIcon imgPublic" @tap='tool.back()'>
					<image src="../static/images/back.png" mode="widthFix"></image>
				</view>
				<view class="title"></view>
				<view class="backIcon imgPublic"></view>
			</view>
		</view>
		<view class="content">
			<view class="pageImg imgPublic">
				<image :src="spread_image" mode="widthFix"></image>
			</view>
			<view class='container dFlex jCenter_aCenter flexDirection' v-if="datas.memberId">
				<view class="infoCenter dFlex flexDirection jStart_aCenter" style="width: 100%;margin-top: 70px;">
					<view class="inviteCode">邀请码: {{datas.memberId}}</view>
					<view class="codeImg imgPublic">
						<!-- #ifdef MP-WEIXIN -->
						<image :src="imgDomain + datas.erweima" mode="widthFix"></image>
						<!-- #endif -->
						<!-- #ifdef APP-PLUS -->
						<image :src="imgDomain + datas.erweima2" mode="widthFix"></image>
						<!-- #endif -->
					</view>
					<view class="tel">{{datas.tel}}</view>
					<view class="imgPublic" style="width:90%;height:auto;margin-top:30px;">
						<image :src="imgDomain + datas.yun_image" mode="widthFix"></image>
					</view>
				</view>
				
				<view class="toast"></view>
			</view>
		</view>
		<view class="seat"></view>
		<!-- <view class="inviteBtn" @tap.stop='opFlag = true'> -->
		<view class="inviteBtn" @tap.stop='opShare' v-if='datas.gradeId<3'>
			<view class="btnImg imgPublic">
				<image src="https://wx.gdxixiashi.com/public/images/home/but@2x.png" mode="widthFix"></image>
			</view>
			<view class="btnTxt dFlex jCenter_aCenter" >生成海报</view>
		</view>
		<view v-else style="display: flex;position: fixed;bottom: 3%;width: 100%;">
			<view  style="width: 40%;margin-left: 5%;background: #f5980f;line-height: 30px;border-radius: 5px;color: #fff;" @tap.stop='opShare' >
				<view class="btnTxt dFlex jCenter_aCenter" >生成海报</view>
			</view>
			<view  style="width: 40%;margin-left: 10%;background: #f5980f;line-height: 30px;border-radius: 5px;color: #fff;" @click='uploadimage()' >
				<view class="btnTxt dFlex jCenter_aCenter" >上传照片</view>
			</view>
		</view>
		
		<!-- canvas -->
		<view class="zz hb">
			<canvas id="poster" canvas-id="poster" name='poster' :style="'width:100%;height:'+cheight+'px'"></canvas>
		</view>
	</view>
</template>

<script>
	let ctx = null;
	export default {
		data() {
			return {
				imgDomain: getApp().globalData.imgDomain,
				device: getApp().globalData.platform,
				datas: {},
				cwidth:uni.getSystemInfoSync().windowWidth,
				cheight:'',
				shareImg:'',
				spread_image:'',
			};
		},
		onShow() {
			this.initUser();
			// if(uni.getStorageSync('userId')){
				
			// }else{
			// 	uni.redirectTo({
			// 		url:'/person/login'
			// 	})
			// }
		},
		onShareAppMessage() {
			console.log(this.datas.memberId);
			return this.shareStatus == '1'?{
				
			}:{
				title: '洗匣士~您的家居窗帘清洗助手',
				path: '/pages/home?spreadId=' + this.datas.memberId,
				imageUrl: getApp().globalData.imgDomain + 'public/logo.png',
				desc: '手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		onShareTimeline() {
			console.log(this.datas.memberId);
			return {
				title: '洗匣士~您的家居窗帘清洗助手',
				path: '/pages/home?spreadId=' + this.datas.memberId,
				imageUrl: getApp().globalData.imgDomain + 'public/logo.png',
				desc: '手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		methods: {
			initUser() {
				this.tool.getUserInfo().then(res => {
					console.log(res);
					if (res) {
						this.spread_image = res.spread_image;
						this.datas = res;
						uni.getImageInfo({
							src:this.spread_image,
							success:(info)=>{
								if(info){
									this.cheight = this.cwidth / (info.width / info.height);
								}
							},
							fail:(err)=>{
								console.log(err);
							},
							complete: () => {
								// this.createPoster();
							}
						})
					}
				}).catch(err => {
					console.log(err);
				})
			},
			// 分享
			opShare(){
				
				// #ifdef APP-PLUS
				if(!uni.getStorageSync('is_save')){
					uni.showModal({
						title:'申请权限',
						content:'本次申请使用您的存储权限用于保存分享二维码，是否同意',
						success:(op)=>{
							if(op.confirm){
								
							}else{
								uni.switchTab({
									url:'/pages/person'
								})
							}
						},
						fail:(err)=>{
							console.log(err);
						}
					})
				}
				// #endif
				this.createPoster();
			},
			//上传照片
			uploadimage(){
				uni.navigateTo({
					url:'../person/yunapply2',
				})
			},
			createPoster(){
				ctx = uni.createCanvasContext('poster', this);
				uni.downloadFile({
					url:this.spread_image,
					success: (bgImg) => {
						uni.downloadFile({
							// #ifdef MP-WEIXIN
							url:this.imgDomain + this.datas.erweima,
							// #endif
							// #ifdef APP-PLUS
							url:this.imgDomain + this.datas.erweima2,
							// #endif
							success: (info) => {
								console.log('二维码信息');
								console.log(info);
								uni.showLoading({
									title:"制作中..."
								})
								if(info.tempFilePath){
									/* 头像 */
									uni.downloadFile({
										url:this.imgDomain + this.datas.yun_image,
										success: (tx) => {
											if(tx.tempFilePath){
												// 填充背景色，白色
												ctx.setFillStyle('#FFFFFF'); // 默认白色
												/* ctx.fillRect(0, 0,this.cwidth,this.cheight); */// fillRect(x,y,宽度，高度)
												// ctx.drawImage('../static/images/inviteBg.jpg',0,0,this.cwidth,this.cheight);
												ctx.drawImage(bgImg.tempFilePath,0,0,this.cwidth,this.cheight);
												/* 二维码 */
												// this.tool.circleImgOne(ctx,info.tempFilePath,this.cwidth - (this.cwidth * 0.08 + 100),this.cheight * 0.845,50,1);
												this.tool.circleImgOne(ctx,info.tempFilePath,(this.cwidth - 120) / 2,(this.cheight * 0.86) / 2 - 60 / 2,60,1);
												ctx.drawImage(tx.tempFilePath,20,this.cheight * 0.6,this.cwidth-40,200);
												/* 头像 */
												// this.tool.circleImgOne(ctx,tx.tempFilePath,this.cwidth * 0.08,this.cheight * 0.805,22);
												/* 昵称 */ 
												/* ctx.setFillStyle('#1664FF') // 字体颜色
												ctx.font="bold 16px Arial";
												ctx.fillText(this.datas.nickName,this.cwidth * 0.08,this.cheight * 0.885); */
												/* 电话 */
												ctx.setFillStyle('#fff') // 字体颜色
												ctx.font="15px Arial";
												let telWidth = ctx.measureText(this.datas.tel).width;
												// ctx.fillText(this.datas.tel,this.cwidth * 0.08,this.cheight * 0.915);
												ctx.fillText(this.datas.tel,(this.cwidth - telWidth) / 2,this.cheight * 0.57);
												//邀请码
												ctx.setFillStyle('#fff') // 字体颜色
												ctx.font="14px Arial";
												let codeWidth = ctx.measureText('邀请码：'+this.datas.memberId).width;
												// ctx.fillText('邀请码：'+this.datas.memberId,this.cwidth * 0.08,this.cheight * 0.945);
												ctx.fillText('邀请码：'+this.datas.memberId,(this.cwidth - codeWidth) / 2,this.cheight * 0.375);
												/* 提示文字 */
												ctx.setFillStyle('#1664FF') // 字体颜色
												ctx.font="14px Arial";
												let toastWidth = ctx.measureText('长按/扫描二维码加入洗匣士').width;
												//ctx.fillText("长按/扫描二维码加入洗匣士",(this.cwidth - toastWidth) / 2,this.cheight * 0.9);
												ctx.draw(true,()=>{
													setTimeout(()=>{
														uni.canvasToTempFilePath({ // 保存canvas为图片
															canvasId: 'poster',
															quality: 1,
															width:this.cwidth,
															height:this.cheight,
															complete: (res)=> {
																uni.hideLoading();
																if(res.tempFilePath){
																	this.shareImg = res.tempFilePath;
																	// #ifdef MP-WEIXIN
																	uni.showShareImageMenu({
																		path:this.shareImg,
																	})
																	// #endif
																	// #ifdef APP-PLUS
																	uni.saveImageToPhotosAlbum({
																		filePath:res.tempFilePath,
																		success: () => {
																			uni.setStorageSync('is_save',1)
																			uni.showToast({
																				title:'图片已保存',
																				icon:'success'
																			})
																		}
																	})
																	// #endif
																}
															},
														},this) // 这里是新增的this，只有在微信小程序中需要加入，不然会报错
													},500)
												})
											}
										},
										fail:(err)=>{
											console.log(err);
											uni.hideLoading()
											uni.showToast({
												title:'图片下载失败',
												icon:"none"
											})
										},
										complete: () => {}
									})
								}
							},
							fail:(err)=>{
								console.log(err);
								uni.hideLoading()
								uni.showToast({
									title:'图片下载失败',
									icon:"none"
								})
							}
						})
					},
					fail:(err)=>{
						uni.showToast({
							title:'背景图下载失败',
							icon:'none'
						})
					}
				})
				
			}
		}
	}
</script>

<style lang="scss">
	page {
		width:100%;
	}
	.hb{
		overflow: auto;
		left:-100%;
	}
	.invite {
		position: relative;
		width:100%;
		.content{
			position: relative;
			width:100%;
			.pageImg {
				width: 100%;
			}
			.container {
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				position: absolute;
				top: 0;
				left: 0;
				padding-left: 4%;
				padding-right: 4%;
				padding-bottom: 40px;
				.userInfo{
					flex: 1;
					color: #1664FF;
					text-align: left;
					.nickname{
						font-size:16px;
						font-weight: bold;
						margin:8px 0;
					}
					
					.tel{
						margin:5px 0;
					}
					.tx{
						width: 60px;
						height: 60px;
						border-radius: 50%;
						overflow: hidden;
						image{
							height:100%;
						}
					}
				}
				.toast{
					position: relative;
					top:40vh;
					color: #1664FF;
				}
				.infoCenter{
					text-align: center;
					margin: 0 12px;
					.tel{
						margin:10px auto 0;
						color: #fff;
					}
					.inviteCode {
						margin:0 auto 10px;
						color: #fff;
					}
					.codeImg {
						width: 130px;
						height: 130px;
						background: white;
						padding: 10px;
						box-sizing: border-box;
						border-radius: 80px;
					}
				}
			}
		}
		.inviteBtn {
			width: 100%;
			position: fixed;
			color: #E11F00;
			font-size: 18px;
			font-weight: bold;
			bottom:2.5%;
			left: 0;
			.btnTxt {
				width: 100%;
				height: 85%;
				position: absolute;
				top: 0;
				left: 0;
			}
		}
		
	}
</style>